<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<script type="text/javascript" src="layui1/layui.js" ></script>

	<link rel="stylesheet" href="layui1/css/layui.css" />
<script type="text/javascript" src="js/jQuery-2.2.2-min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	var url="ws://localhost:8080/ChatHandler/";
	var ws=null;//webSocket对象
	chatroom();


	$("#jion").click(function(){
		chatroom();
	});
	//加入聊天室
	function chatroom(){
		//获取当前加入聊天室的人的名字
		var uname=$("#uname1").val();
		//
		
		//创建websocket对象，连接服务器
		ws=new WebSocket(url+uname);
		//给ws对象绑定事件
		//连接上服务器
		ws.onopen=function(){
			console.info("连接服务器成功！");
		}
		//接收到消息,将消息添加到消息框中
		ws.onmessage=function(result){
			if(result.data.indexOf("欢迎")!=-1){

			}else{
			var textarea=document.getElementById("message1");
			textarea.append(result.data+"\n");
			textarea.scrollTop=textarea.scrollHeight;
			}
		}
		//关闭连接
		ws.onclose=function(){
			$("#message1").append(uname+"离开聊天室\n");
			console.info("断开连接");
		}
	}
	//发送消息
	$("#send1").click(function(){
	//获取输入框
	var content=$("#content1").val();
	//获取对方的uname;
		var touser=$("#friendname").text();
		console.info(touser);
		//拼接到信息中
		var content=content+"|"+touser;
	//发送消息
	if(ws!=null){
		ws.send(content);
		$("#content1").val("");//清除输入框的内容
	}
	});
	//离开聊天室
	$("#leave").click(function(){
		if(ws!=null){
			ws.close();
		}
	});
});
</script>


</head>
<body>



<div style="width: 600px;height: 500px; background-color:rgb(242,242,242) ;margin: 30px auto;box-shadow: 3px 3px 3px rgb(203,203,203),3px -3px 3px rgb(203,203,203),-3px 3px 3px rgb(203,203,203),3px -3px 3px rgb(203,203,203);">

<!--名称的div-->
<div style="width: 600px;height: 90px; margin: 0 auto;text-align: center;">
	<p id="friendname" style=" font-family: 微软雅黑;font-size: 23px;padding-top: 30px"></p>
</div>
	<!--中间的文本-->
<div  style="width: 400px;height: 290px;float: left;"  >
	<div >
		<div>
			<textarea id="message1"  rows="19" cols="56" disabled="disabled" style="background-color: rgb(242,242,242);border:1px solid rgb(223,223,223)"></textarea>
		</div>
	</div>
</div>
	<!--输入框-->
	<div style="float: left; width: 400px; height: 60px;">
			<div >
				<div >
					<textarea id="content1" rows="4" cols="56" style="background-color: rgb(242,242,242);border:1px solid rgb(223,223,223)"></textarea>
				</div>
			</div>
	</div>
	<input type="hidden" id="uname1" value="张三">
	<!--发送按钮-->
	<div style="float: left; width: 392px; height: 57px;background-color: rgb(242,242,242);border: 1px solid rgb(223,223,223);border-top: 0px;border-bottom: 0px">

		<button id="send1" style="margin-left: 330px;margin-top :30px;background-color: rgb(204,204,204);border: 0px;width: 55px;height: 25px"  ><span style="font-size: 11px;">发送消息</span></button>
	</div>
	<!--右边显示图片-->
	<div id="test13" class="demo-tree-more" style="float: left; width: 201px; height: 404px;margin-top: -350px;border-top: 1px solid rgb(223,223,223)">
<img src="imgs/QQShow.jpg" width="205px" height="408px">

	</div>

</div>







</body>
<script>
	$(document).ready(function(){
	var name=	parent.data.name;
	$("#friendname").text(name);
	console.info(name);
	});
</script>
</html>